window.AUI.customCompoents.define("aui-pagination", class extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            pagination: {
                type: Object,
                required: true,
            },
            hide: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object
            },
            size: {
                type: String
            },
        };
        this.computed = {
            arr() {
                if (this.pagination.last_page <= 0) {
                    return [];
                }
                let from = this.pagination.current_page - this.config.offset;
                if (from < 1) {
                    from = 1;
                }
                let to = from + (this.config.offset * 2);
                if (to >= this.pagination.last_page) {
                    to = this.pagination.last_page;
                }
                const arr = [];
                while (from <= to) {
                    arr.push(from);
                    from += 1;
                }
                return arr;
            },
            config() {
                return Object.assign({
                    offset: 3,
                    ariaPrevious: 'Previous',
                    ariaNext: 'Next',
                    ariaFirst: 'First',
                    ariaLast: 'Last',
                    previousText: 'Prev',
                    nextText: 'Next',
                    firstText: "First",
                    lastText: "Last",
                    alwaysShowPrevNext: true,
                    alwaysShowFirst: true,
                    alwaysShowLast: true
                }, this.options);
            },
            sizeClass() {
                if (this.size === 'large') {
                    return 'pagination-lg';
                } else if (this.size === 'small') {
                    return 'pagination-sm';
                }
                return '';
            },
        };
        this.watch = {
            'pagination.per_page'(newVal, oldVal) { // eslint-disable-line
                if (+newVal !== +oldVal) {
                    this.$emit("change", newVal);
                }
            }
        };
        this.methods = {
            showPrevious() {
                return true;
                return this.config.alwaysShowPrevNext || this.pagination.current_page > 1;
            },
            showNext() {
                return true;
                return this.config.alwaysShowPrevNext ||
                    this.pagination.current_page < this.pagination.last_page;
            },
            showFirst() {
                return true;
                return this.config.alwaysShowFirst || this.pagination.current_page > 1;
            },
            showLast() {
                return true;
                return this.config.alwaysShowLast ||
                    this.pagination.current_page < this.pagination.last_page;
            },
            changePage(page) {
                if (this.pagination.current_page === page) {
                    return;
                }
                this.$set(this.pagination, 'current_page', page);
                this.$emit("change", page);
            }
        };
    }
    _template() {
        var self = this;
return `<nav class="${self._name}" :aui-hidden="hide">
    <ul class="pagination" v-if="pagination && pagination.last_page > 0" :class="sizeClass">
        <li v-if="showFirst()" :class="{ 'disabled' : pagination.current_page <= 1 }">
            <span v-if="pagination.current_page <= 1">
                <span aria-hidden="true">{{ config.firstText }}</span>
            </span>

            <a href="#" v-if="pagination && pagination.current_page > 1 " :aria-label="config.ariaFirst" @click.prevent="changePage(1)">
                <span aria-hidden="true">{{ config.firstText }}</span>
            </a>
        </li>
    
        <li v-if="showPrevious()" :class="{ 'disabled' : pagination.current_page <= 1 }">
            <span v-if="pagination && pagination.current_page <= 1">
                <span aria-hidden="true">{{ config.previousText }}</span>
            </span>

            <a href="#" v-if="pagination && pagination.current_page > 1 " 
                :aria-label="config.ariaPrevioius" @click.prevent="changePage(pagination.current_page - 1)">
                <span aria-hidden="true">{{ config.previousText }}</span>
            </a>
        </li>

        <li v-for="num in arr" :class="{ 'active' : num === pagination.current_page }">
            <a href="#" @click.prevent="changePage(num)">{{ num }}</a>
        </li>

        <li v-if="showNext()" :class="{ 'disabled' : pagination.current_page === pagination.last_page || pagination.last_page === 0 }">
            <span v-if="pagination && pagination.current_page === pagination.last_page || pagination.last_page === 0">
                <span aria-hidden="true">{{ config.nextText }}</span>
            </span>

            <a href="#" v-if="pagination && pagination.current_page < pagination.last_page" 
            :aria-label="config.ariaNext" @click.prevent="changePage(pagination.current_page + 1)">
                <span aria-hidden="true">{{ config.nextText }}</span>
            </a>
        </li>
        
        <li v-if="showLast()" :class="{ 'disabled' : pagination.current_page === pagination.last_page || pagination.last_page === 0 }">
            <span v-if="pagination && pagination.current_page === pagination.last_page || pagination.last_page === 0">
                <span aria-hidden="true">{{ config.lastText }}</span>
            </span>

            <a href="#" v-if="pagination && pagination.current_page < pagination.last_page" 
            :aria-label="config.ariaLast" @click.prevent="changePage(pagination.last_page)">
                <span aria-hidden="true">{{ config.lastText }}</span>
            </a>
        </li>
    </ul>
</nav>`;
    }
    static initPagination(perPage = 10, currentPage = 1, LastPage = 0) {
        return {
            per_page: perPage,    // required
            current_page: currentPage, // required
            last_page: LastPage    // required
        };
    }
});